<template>
  <div id="countList">
    <div class="item" style="border-left: 4px #fb6260 solid">
      <p class="title">应收总额（元）</p>
      <p class="num">{{ countData.planYearMoney }}</p>
      <img :src="require('/public/img/chart1.webp')" alt="" />
    </div>
    <div class="item" style="border-left: 4px #0099ff solid">
      <p class="title">实收总额（元）</p>
      <p class="num">
        {{ countData.customerPaymentYearMoney }} ({{ countData.balanceMoney }})
      </p>
      <img :src="require('/public/img/chart2.webp')" alt="" />
    </div>
    <div class="item" style="border-left: 4px #8167f5 solid">
      <p class="title">借款总额（元）</p>
      <p class="num">{{ countData.loanYearMoney }}</p>
      <img :src="require('/public/img/chart3.webp')" alt="" />
    </div>
    <div class="item" style="border-left: 4px #52d352 solid">
      <p class="title">报销总额（元）</p>
      <p class="num">{{ countData.reimburseYearMoney }}</p>
      <img :src="require('/public/img/chart4.webp')" alt="" />
    </div>
    <div class="item" style="border-left: 4px #ffbf3d solid">
      <p class="title">付款总额（元）</p>
      <p class="num">{{ countData.paymentYearMoney }}</p>
      <img :src="require('/public/img/chart5.webp')" alt="" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'countList',
  data () {
    return {
      countData: {}
    }
  },
  // props: ['date'],
  props: {
    date: {
      type: String,
      required: true,
      default: () => new Date().getFullYear().toString()
    }
  },
  watch: {
    date (val) {
      this.getData()
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      let { data } = await this.$API.finance.getFinanceCountDataByYear.get({ time: this.date })
      this.countData = data
    }
  }
}
</script>
<style lang="scss" scoped>
#countList {
  display: flex;
  .item {
    flex-basis: calc(100% / 5);
    padding: 20px 30px;
    margin-right: 20px;
    background: #fff;
    box-sizing: border-box;
    .title {
      font-size: 14px;
      color: #666;
    }
    .num {
      margin-top: 10px;
      margin-bottom: 20px;
      font-weight: 600;
      font-size: 32px;
    }
    &:last-child {
      margin-right: 0;
    }
    img {
      width: 100%;
    }
  }
}
</style>